<!--  -->
<template>
    <div class='content'>
        <div style="height: 10vh;padding: 20px">
            <div style="">
                <el-input v-model="input" placeholder="请输入内容" style="width: 30%;margin: 10px"></el-input>
                <el-button @click="search">搜索</el-button>
            </div>
            <div style="margin: 10px">
                <el-button @click="addUser" type="primary">新增</el-button>
                <el-button @click="delAny" type="danger">批量删除</el-button>
                <el-button @click="inportData" type="primary">导入</el-button>
                <el-button @click="exportData" type="primary">导出</el-button>
            </div>
        </div>
        <el-main style="height: 70vh">
            <tableCom :tableData="tableData" @handleSelectionChange="handleSelectionChange" @userhandler="userhandler">
            </tableCom>
        </el-main>
        <div style="height: 10vh">
            <pageCom @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                :currentPage="currentPage" :pageList="pageList" :pageSize="pageSize" :pageInfo="pageInfo"></pageCom>
        </div>
        <!--  弹出层-->
        <propView :showForm="dialogVisible" :updateNow="updateNow" :userData="user" @close="closeForm"></propView>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { add, del, findByPage, update } from "@/api/user"

import pageCom from "@/components/home/pageCom.vue";
import tableCom from "@/components/home/tableCom.vue";
import propView from "@/components/propView.vue";
export default {
    name: 'UserView',
    //import引入的组件需要注入到对象中才能使用
    components: { propView, pageCom, tableCom },
    data() {
        return {
            tableData: [], // 显示列表
            selectList: [],// 多选人数
            pageInfo: {}, // 页码信息
            currentPage: 0, // 当前页面
            input: "", // 输入框值
            user: {}, // 单选用户数据
            dialogVisible: false, // 显示弹窗
            pageList: [5, 10, 15, 20], // 选择分页数组
            pageSize: 5, // 默认显示页大小
            pageNum: 0, // 默认页码
            updateNow: "" // 是否更新
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        handleSelectionChange(val) {
            console.log("选择了~~~", val)
            this.selectList = val
        },
        // 初始化数据
        async initData(pageNum = this.pageNum, pageSize = this.pageSize) {
            let key = ""
            if (this.input) {
                key = this.input
            }
            const res = await findByPage({ pageNum, pageSize, key })
            console.log(res, "初始化的数据")
            this.tableData = res.data
            this.pageInfo = res.pageInfo
        },
        // 搜索事件
        search() {
            console.log("搜索~~~~~~~", this.input)
            this.pageNum = 0
            this.initData()
        },
        // 添加用户弹窗
        addUser() {
            console.log("点击了新增")
            this.updateNow = "add"
            this.dialogVisible = !this.dialogVisible
        },
        // 批量删除用户
        delAny() {
            console.log("点击了删除", this.selectList)
            this.selectList.forEach(it => {
                this.userhandler("del", it)
            })
        },

        // 导入
        inportData() {
            console.log("点击了导入")
        },
        // 导出
        exportData() {
            console.log("点击了导出")
        },
        // 删除用户和查看用户详情
        async userhandler(val, val2 = this.user) {
            console.log("val2val2val2val2val2val2val2val2val2val2val2val2", val2)
            if (val === "del") {
                // 删除单个用户
                console.log("删除这个用户是", val)
                await del(val2.id)
                this.user = {}
                this.pageNum = 0
                this.initData()
                return
            } if (val !== "show") {
                this.updateNow = val
            }
            this.dialogVisible = !this.dialogVisible
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageNum = 0
            this.pageSize = val
            this.initData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val - 1
            this.initData()
        },
        // 弹窗表单点击确定时触发
        async closeForm(val) {
            this.dialogVisible = !this.dialogVisible
            if (val) {
                this.user = val
                this.user.createTime = new Date().toISOString();
                console.log(this.updateNow, "接收到的参数", this.user)
                if (this.updateNow === "add") {
                    const res = await add(this.user)
                    console.log("响应", res)
                }
                if (this.updateNow === "update") {
                    const res = await update(this.user)
                    console.log("响应", res)
                }
                this.updateNow = ""
                this.user = {}
                this.pageNum = 0
                this.initData()
            }
        },
        // 点击表格框获取用户信息
        selectOne(val) {
            console.log("点击了~~~", val)
            this.user = val
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.initData()
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
/* @import url(); 引入公共css类 */
</style>